<template>
	<div class="myWeather" v-show="!item.common.isHidden" :style="commonStyle">
		<block v-for="widget in widgetList" :key="widget.cid">
			<myImg v-if="widget.type === 'pic'" :ref="widget.type+widget.cid" :pcid="widget.cid" :pageConfig="pageConfig"></myImg>
			<myLabel v-if="widget.type === 'label'" :ref="widget.type+widget.cid" :pcid="widget.cid" :pageConfig="pageConfig"></myLabel>
		</block>
	</div>
</template>

<script>
	import ajax from '../libs/ajax.js';
	import myImg from './myImg.vue';
	import myLabel from './myLabel.vue';
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myWeather',
		props:{
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		components:{myImg,myLabel},
		data(){
			return {
				item: {common: {},style: {},children:[]},
				searching: false,
				widgetList: []
			}
		},
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					this.afterCreated()
					return true
				}
			})
		},
		computed:{
			commonStyle(){
				return calcBaseStyle(this.item,this.pageConfig.contentH)
			},
		},
		methods:{
			afterCreated(){
				this.widgetList = this.item.children
				// #ifdef H5
				this.weatherContent()
				// #endif
				// #ifdef MP
				if(this.item.common.autoPosition){
					uni.getLocation({
						type:'gcj02',
						success: res =>{
							this.getAreaCode(res.longitude,res.latitude).then(cityCode=>{
								this.initWeather(cityCode)
							})
						},
						fail: () =>{
							this.initWeather(this.$weather.cityCode)
						}
					})
				}else{
					this.cityCodeChange(this.item.common.cityCode)
				}
				// #endif
			},
			cityCodeChange(cityCode){
				if(this.searching){
					return
				}
				this.searching = true
				if(cityCode){
					this.initWeather(cityCode)
				}else{
					this.initWeather(this.$weather.cityCode)
				}
			},
			getAreaCode(longitude,latitude){
				return new Promise((resolve,reject)=>{
					ajax({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						noErrorMsg: true,
						moduleUrl: 1,
						method:"get",
						header: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						data: {
							key: 'a81e53f9fa062c94a1d5f6c995fac259',
							location: longitude + ',' + latitude,
							extensions: "all",
							s: "rsx",
							platform: "WXJS",
							appname: 'a81e53f9fa062c94a1d5f6c995fac259',
							sdkversion: "1.2.0",
							logversion: "2.0"
						}
					}).then(res=>{
						if(res.status === '1'){
							var cityCode = res.regeocode.addressComponent.adcode
							resolve(cityCode)
						}else{
							this.searching = false
						}
					}).catch(()=>{
						this.searching = false
					})
				})
			},
			getWeather(cityCode){
				return new Promise((resolve,reject)=>{
					ajax({
						url: "https://restapi.amap.com/v3/weather/weatherInfo",
						noErrorMsg: true,
						moduleUrl: 1,
						method:"get",
						header: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						data: {
							key: 'a81e53f9fa062c94a1d5f6c995fac259',
							city: cityCode,
							extensions: "base",
							s: "rsx",
							platform: "WXJS",
							appname: 'a81e53f9fa062c94a1d5f6c995fac259',
							sdkversion: "1.2.0",
							logversion: "2.0"
						}
					}).then(res=>{
						if(res.status === '1' && res.count * 1 > 0){
							var result = res.lives[0]
							if(Object.prototype.toString.call(result) !== '[object Object]'){
								this.searching = false
								return
							}
							var cityName = result.city
							var weather = result.weather
							var temperature = result.temperature
							var img = 'http://www.krtimg.com/group1/M00/04/FD/rAA0Kl_z13KAI1J9AAAKkDQKnSg133.png'
							if(weather.indexOf('云') > -1){
								img = 'http://www.krtimg.com/group1/M00/05/28/rAA0KV_z13KAGszZAAAJTMx92NE395.png'
							}
							if(weather.indexOf('晴') > -1 && weather.indexOf('云') > -1){
								img = 'http://www.krtimg.com/group1/M00/04/FD/rAA0Kl_z13KACyG3AAAKtdnwZi4352.png'
							}
							if(weather.indexOf('阴') > -1){
								img = 'http://www.krtimg.com/group1/M00/04/FD/rAA0Kl_z12SAKjVwAAAKKhh3el4891.png'
							}
							if(weather.indexOf('雨') > -1){
								img = 'http://www.krtimg.com/group1/M00/05/28/rAA0KV_z12SAQq0_AAAJ8CRIYq0166.png'
							}
							if(weather.indexOf('雪') > -1){
								img = 'http://www.krtimg.com/group1/M00/05/28/rAA0KV_z12SAe77SAAAKsupO86c622.png'
							}
							if(weather.indexOf('雨') > -1 && weather.indexOf('雪') > -1){
								img = 'http://www.krtimg.com/group1/M00/04/FD/rAA0Kl_2qbqAVCuQAAAJ92gWO7U009.png'
							}
							resolve({img,weather,temperature,cityName})
						}else{
							this.searching = false
						}
					}).catch(()=>{
						this.searching = false
					})
				})
			},
			initWeather(cityCode){
				this.getWeather(cityCode).then(res=>{
					this.$u.vuex('$weather', {
						img: res.img,
						weather: res.weather,
						cityName: res.cityName,
						cityCode: res.cityCode,
						temperature: res.temperature
					});
					this.searching = false
					this.weatherContent()
				})
			},
			weatherContent(){
				this.widgetList.forEach(widget=>{
					var flag = false
					if (widget.type === 'pic' && widget.cid === this.item.common.iconId) {
						widget.common.src = this.$weather.img
						flag = true
					}
					if (widget.type === 'label' && widget.cid === this.item.common.cityNameId) {
						widget.common.text = this.$weather.cityName
						flag = true
					}
					if (widget.type === 'label' && widget.cid === this.item.common.weatherTextId) {
						widget.common.text = this.$weather.weather
						flag = true
					}
					if (widget.type === 'label' && widget.cid === this.item.common.temperatureId) {
						widget.common.text = this.$weather.temperature ? (this.$weather.temperature + '℃') : ''
						flag = true
					}
					if(flag){
						var singleWidget = this.$refs[widget.type+widget.cid] || []
						singleWidget.forEach(item=>{
							item.item = widget
						})
					}
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.myWeather {
		position: absolute;
		overflow: hidden;
	}
</style>
